<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.couponQuery')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                   
                    <el-col :span="6">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true"
                              :max-height="tableMaxHeight" :row-key="handleRowKey" tooltip-effect="light">
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" width="150"></el-table-column><!--手机号码-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column :label="$t('common.type')" prop="typeFlag" min-width="130">
                            <template slot-scope="{ row }">{{ row.typeFlag | switchTypeFlage }}</template>
                        </el-table-column><!--类型-->
                        <el-table-column :label="$t('common.isUserCoupon')" prop="existTicketFlag" min-width="150">
                            <template slot-scope="{ row }">{{ row.existTicketFlag | switchExistTicketFlag }}</template><!--是否有效优惠券-->
                        </el-table-column>
                        <el-table-column :label="$t('common.effectiveCouponAmount')" prop="effectTicketAmountList" min-width="130">
                            <template slot-scope="{ row }">{{ row.effectTicketAmountList | switchEffectTicketAmountList}}</template><!--有效优惠券面额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.bindCouponDenomination')" prop="useTicketAmount" min-width="130">
                            <template slot-scope="{ row }">{{ row.useTicketAmount }}</template><!--绑定优惠券面额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.creditCouponAmount')" prop="actualTicketAmount" min-width="130">
                            <template slot-scope="{ row }">{{ row.actualTicketAmount }}</template><!--实际抵扣优惠券金额-->
                        </el-table-column>
                        
                        <el-table-column :label="$t('common.repayTime')" prop="repayCompletionTime" width="170">
                            <template slot-scope="{ row }">{{ row.repayCompletionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--有效期-->
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
    </div>


</template>

<script>
    import Pagination from "@/components/pagination";
    import mixin from "@/service/mixin";
    import SelectAppList from '@/components/select-app-list';
    import {domain} from '@/config/'

    let that = null;
    export default {
        name: "couponQuery",
        components: {
            Pagination,
            SelectAppList,
        },
        mixins: [mixin],
        data() {
            return {
                showSpread:false,
                form: {
                    userPhone: "",
                    appName: '',
                },
                rules:{
                    userPhone:[{required:true,message:this.$t('verify.plsInput')}] ,
                    appName:[{required:true,message:this.$t('verify.plsChoose')}] 

                }
            };
        },
        methods: {
            getTableData(page = this.page) {
                let params = this.fillParams(page);
                this.$api.operation.queryMemberTicket(params).then(res => {
                    let {status, data, error} = res;
                    if ("1" === status && "00000000" === error && data) {
                        this.tableData = data;
                    }
                });
            },
            search() {
                this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.getTableData();
                } else {
                    
                    return false;
                }
                });
                // this.page.currentPage = 1;
            },
            fillParams() {
                const form = this.form;
                const params = {
                    userPhone: "",
                    appName: '',
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === "string" && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                return params;
            },
           
            // 处理行数据
            handleRowKey(row) {
                return row.id;
            }
        },
        filters: {
            switchEffectTicketAmountList(arr){
                let str = arr.join(',');
                return str
            },
            switchExistTicketFlag(existTicketFlag){
                switch (existTicketFlag) {
                    case 0:
                        return that.$t('common.no');// 
                    case 1:
                        return that.$t('common.yes');// 永久性减免
                    default:
                        return '-';
                }
            },
            switchTypeFlage(typeFlag){
                switch (typeFlag) {
                    case 1:
                        return that.$t('common.currentlyCredit');// 
                    case 2:
                        return that.$t('common.previousStrokeClear');// 永久性减免
                    default:
                        return '-';
                }
            },
            deductionType(deductionType){
                switch (deductionType) {
                    case 0:
                        return that.$t('common.validityRemit');// 有效期减免
                    case 1:
                        return that.$t('common.foreverRemit');// 永久性减免
                    default:
                        return '-';
                }
            },
            derateResultType(derateResultType){
                switch (derateResultType) {
                    case 0:
                        return that.$t('common.finReviewing');// 财务审核中
                    case 1:
                        return that.$t('common.finReviewRefuse');// 财务审核拒绝
                    case 2:
                        return that.$t('common.finReviewSuccess');// 财务审核通过
                    default:
                        return derateResultType;
                }
            }
        },
        created() {
            this.showSpread = domain.showSpread();
            that = this;
            this.tableMaxHeight = document.body.clientHeight - 280;
            // this.getTableData();
        }
    };
</script>

<style lang="scss" scoped>
</style>
